﻿<div [@routerTransition]>
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-sm-12 col-md-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>{{"VisualSettings" | localize}}</span>
                </h3>
                <span class="m-section__sub">
                    {{"UiCustomizationHeaderInfo" | localize}}
                </span>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <tabset type="pills" class="tab-container tabbable-line">
                    <tab *ngFor="let themeSetting of themeSettings" customClass="m-tabs__item" [active]="themeSetting.theme == currentThemeName">
                        <ng-template tabHeading>
                            <img [src]="'/assets/common/images/metronic-themes/' + themeSetting.theme +  '.png'" width="150" />
                            <span class="theme-name">{{getLocalizedThemeName(themeSetting.theme)}}</span>
                        </ng-template>

                        <default-theme-ui-settings *ngIf="themeSetting.theme == 'default'" [settings]="themeSetting"></default-theme-ui-settings>
                        <theme2-theme-ui-settings *ngIf="themeSetting.theme == 'theme2'" [settings]="themeSetting"></theme2-theme-ui-settings>
                        <theme3-theme-ui-settings *ngIf="themeSetting.theme == 'theme3'" [settings]="themeSetting"></theme3-theme-ui-settings>
                        <theme4-theme-ui-settings *ngIf="themeSetting.theme == 'theme4'" [settings]="themeSetting"></theme4-theme-ui-settings>
                        <theme5-theme-ui-settings *ngIf="themeSetting.theme == 'theme5'" [settings]="themeSetting"></theme5-theme-ui-settings>
                        <theme6-theme-ui-settings *ngIf="themeSetting.theme == 'theme6'" [settings]="themeSetting"></theme6-theme-ui-settings>
                        <theme7-theme-ui-settings *ngIf="themeSetting.theme == 'theme7'" [settings]="themeSetting"></theme7-theme-ui-settings>
                        <theme8-theme-ui-settings *ngIf="themeSetting.theme == 'theme8'" [settings]="themeSetting"></theme8-theme-ui-settings>
                        <theme9-theme-ui-settings *ngIf="themeSetting.theme == 'theme9'" [settings]="themeSetting"></theme9-theme-ui-settings>
                        <theme10-theme-ui-settings *ngIf="themeSetting.theme == 'theme10'" [settings]="themeSetting"></theme10-theme-ui-settings>
                        <theme11-theme-ui-settings *ngIf="themeSetting.theme == 'theme11'" [settings]="themeSetting"></theme11-theme-ui-settings>
                        <theme12-theme-ui-settings *ngIf="themeSetting.theme == 'theme12'" [settings]="themeSetting"></theme12-theme-ui-settings>
                    </tab>
                </tabset>
            </div>
        </div>
    </div>
</div>
